<template>
  <div class="login-container">
    <!-- 新添加的购物商城标题 -->

    <div class="image-container">
      <img src="@/assets/drive2.jpg">
    </div>
    <div class="login-content">
      <h1 class="title">驾校报名系统</h1>
      <form @submit.prevent="submitForm">
        <div class="input-group">
          <label for="role">角色</label>
          <select
              id="role"
              v-model="role"
              required
              class="role-select"
          >
            <option value="0">系统管理员</option>
            <option value="1">审核员</option>
          </select>
        </div>
        <div class="input-group">
          <label for="username">用户名</label>
          <input
              type="text"
              id="username"
              v-model="username"
              required
              autofocus
              placeholder="请输入用户名"
          />
        </div>
        <div class="input-group">
          <label for="password">密码</label>
          <input
              type="password"
              id="password"
              v-model="password"
              required
              placeholder="请输入密码"
          />
        </div>
        <button type="submit" class="login-button">登录</button>
      </form>
      <p class="register-link">
        没有账号？
        <a href="#" @click.prevent="toggleRegister">注册</a>
      </p>
    </div>

    <!-- 新添加的模态窗口 -->
    <div>
      <el-dialog title="注册新用户" v-model="showRegister" width="30%">
        <form @submit.prevent="submitRegisterForm">
          <div class="input-group">
            <label for="register-username">用户名</label>
            <input
                type="text"
                id="register-username"
                v-model="registerUsername"
                required
                placeholder="请输入用户名"
            />
          </div>
          <div class="input-group">
            <label for="register-password">密码</label>
            <input
                type="password"
                id="register-password"
                v-model="registerPassword"
                required
                placeholder="请输入密码"
            />
          </div>
        </form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="toggleRegister">取消</el-button>
            <el-button type="primary" @click="submitRegisterForm">注册</el-button>
          </div>
        </template>
      </el-dialog>
    </div>

  </div>
</template>

<script>

import './css/Login.css';
import Login from './js/Login.js';

export default Login;

</script>
<style scoped>

</style>